<template>
	<view class="container">
		<view class="form">
			<view class="form-title">学生登录</view>
			<view class="input-container">
				<input v-model="stuNum" placeholder="学号">
				<image class="svg" src="/static/svg/符号1.svg"></image>	
			</view>
			<view class="input-container">
				<input v-model="pwd" placeholder="密码" type="password">
				<image  class="svg" src="/static/svg/符号2.svg"></image>	

			</view>
			<button class="submit" type="submit" @click="submit">
				登录
			</button>

			
		</view>

	</view>

</template>

<script setup>
	import {
		ref,onMounted
	} from "vue"
	
	import {loginIn}  from "@/request/loginInRe.js"
	const stuNum = ref()
	const pwd = ref()
	const info =ref({}) 
	const submit = async function(){
		// console.log(stuNum.value+","+pwd.value);
		await loginIn(stuNum.value,pwd.value).then(res=>{
			// console.log(res)
			info.value = res.data.data
			if(res.data.code==200){
				uni.showToast({
					title:"登录成功",
					duration:1500
				})
				uni.setStorageSync('stuInfo', {
					studentid:res.data.data.studentId,
					// studentid:2
				});
				uni.reLaunch({
					url:"/pages/signIn/signIn"
				})
			}
			else{
				uni.showToast({
					title:"用户名或密码错误",
					duration:1500,
					icon:"error"
				})
			}
		}).catch(err=>{
			console.log(err);
			uni.showToast({
				title:"服务器出错",
				duration:1500,
				icon:"error"
			})
		})
	};
	onMounted(() => {
		// console.log(11111);
		uni.getStorage({
		    key: 'stuInfo',
		    success: function (res) {
				console.log("已登录，跳过");
		      // 已登录，自动跳转主页
		      uni.reLaunch({
		      	url:"/pages/signIn/signIn"
		      })
		    },
		    fail: function () {
		      console.log('尚未登录，显示登录页面');
		    }
		});
	});
	
</script>
<style lang="scss" scoped>
.container {
	margin-top: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 60rpx;

	.form {
		background-color: #fff;
		display: block;
		padding: 50rpx;
		width: 700rpx;
		border-radius: 20rpx;
		box-shadow: 0 20rpx 30rpx -6rpx rgba(0, 0, 0, 0.1),
					0 10rpx 20rpx -4rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;

		.form-title {
			width: 100%;
			// padding: 20rpx;
			font-size: 36rpx;
			// line-height: 50rpx;
			font-weight: 600;
			text-align: center;
			color: #000;
			margin-bottom: 50rpx;
		}

		.input-container {
			// height: 120rpx;
			position: relative;
			margin-bottom: 20rpx;
		}

		.input-container input,
		.form button {
			outline: none;
			border: 1rpx solid #e5e7eb;
			margin: 16rpx 0;
		}

		.input-container input {
			height: 30rpx;
			background-color: #fff;
			padding: 30rpx;
			font-size: 28rpx;
			width: 90%;
			border-radius: 16rpx;
			box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
		}

		

		.input-container .svg {
			position: absolute;
			top: 50%;
			right: 30rpx;
			transform: translateY(-50%);
			width: 40rpx;
			height: 40rpx;
		}

		.submit {
			display: block;
			padding: 24rpx 40rpx;
			background-color: #4F46E5;
			color: #ffffff;
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 500;
			width: 100%;
			border-radius: 16rpx;
			text-transform: uppercase;
			margin-top: 40rpx;
		}

		
	}
}
</style>
